<script setup>
import { ref} from 'vue'
import {postAddShop} from '/src/api/shopCar/shopCarApi'
import {onLoad} from "@dcloudio/uni-app";

const ids=ref(0)
const nums = ref(1)
const imgUrl = ref('')
const uToastRef = ref();
onLoad((option)=>{
  console.log(option);
  ids.value = option.id
  imgUrl.value = option.img
})

async function postAdd(){
  const id= ids.value
  const num = nums.value
  console.log(id, num);
  const {msg, state} = await postAddShop({goods_id:id,buyNum:num})
  if(state === 201){
    uToastRef.value.show({
      type: 'success',
      message: msg,
    });
    setTimeout(()=>{
      uni.hideToast()
      uni.navigateBack()
    },500)
  } else {
    uToastRef.value.show({
      type: 'error',
      message: msg,
    });
  }
}
</script>

<template>
  <up-toast ref="uToastRef"></up-toast>
<view>
  <view class="header">
    <image class="header-image" :src="imgUrl"></image>
  </view>
<!--  header end-->
  <view class="shopInfo">
    <view class="top">
      <view class="price">￥18.00</view>
      <view class="grade">⭐⭐⭐⭐⭐</view>
    </view>
    <view class="center">
      <view class="h1">商品名称</view>
      <view class="p">净含量</view>
      <view class="p">编号：0002</view>
    </view>
  </view>
  <view class="goods-carts">
    <button class="inCar" @click="postAdd">加入购物车</button>
    <button class="buy" @click="postAdd">立即购买</button>
  </view>
</view>
</template>

<style scoped lang="scss">
  .header{
    width:750rpx;
    height:750rpx;
    .header-image{
      width:750rpx;
      height:750rpx;
    }
  }
  .shopInfo{
    width:750rpx;
    .top{
      display:flex;
      width:750rpx;
      margin-top:25rpx;
      .price{
        margin-left:36rpx;
        color:red;
        font-size: 31rpx;
      }
      .grade{
        margin-left:366rpx;
      }
    }
    .center{
      font-size:30rpx;
      margin-top:32rpx;
      .h1{
        font-size:33rpx;
        margin-left:32rpx;
        font-weight:900;
        margin-bottom:25rpx;
      }
      .p{
        margin-left:32rpx;
        color: rgba(0, 0, 0, 0.44);
      }
    }
  }
  .goods-carts{
    display:flex;
    width:750rpx;
    justify-content: left;
    position: fixed;
    bottom:0;
    left:0;
    .inCar{
      width:284rpx;
      height:101rpx;
    }
    .buy{
      width:281rpx;
      height:101rpx;
      background:red;
      color:#fff;
    }
  }
</style>